<template>
	<view class="clearfix">
		<view class="user">
			<view class="wrap">
				<view class="img_wrap">
					<image class="user_img" :src="team.icon" mode="scaleToFit"></image>
				</view>
				<view class="name com_title">
					{{team.name}}<text class="level">S{{team.grade}}</text>
				</view>
				<view class="intro">{{team.brief}}</view>
				<view class="num">
					团队人员剩余<text class="No">{{team.surplus}}</text>位
				</view>
			</view>
		</view>
		<!--end user-->
		<view class="notice">
			<view class="top">
				<view class="left">
					<text class="info uniicons">&#xe504;</text>
					<text class="title">团队公告</text>
				</view>
			</view>
			<textarea class="bottom" auto-height disabled v-model="team.notice">

			</textarea>
		</view>
		<!--end notice-->
		<!-- 	<view class="notice">
			<view class="top">
				<view class="left">
					<text class="info uniicons">&#xe333;</text>
					<text class="title">团队地址</text>
				</view>
			</view>
			<view class="bottom">
				{{team.address}}
			</view>
		</view> -->
		<!--end notice-->
		<wyb-button class="btn" :ripple="true" type="filled" color="#585cf7" :radius="radius" width="690rpx"
			height="88rpx" font-size="32rpx" @click="joinTeam">申请加入</wyb-button>
		<!-- <view @click="goZc" class="zz-tips">无账号去注册</view> -->
		<van-popup :show="show" :close-on-click-overlay="false" @close="close" closeable round close-icon="close"
			close-icon-position="top-right">
			<view class="layer">
				<view class="tishi">提示</view>
				<view class="ts-content">未登录，无法加入</view>
				<view class="btn-flex">
					<view @click="goZc" class="btn-item">注册</view>
					<navigator url="/pages/login/index" class="btn-item btn-item-login">登录</navigator>
				</view>
			</view>
		</van-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radius: ["100px"],
				option: {},
				team: {},
				show: false
			};
		},
		onLoad(option) {
			console.log(option)
			this.option = option;
			this.getTeam(option.scene)
		},
		methods: {
			//关闭弹层
			close() {
				this.show = false
			},
			//去注册
			goZc() {
				uni.navigateTo({
					url: `/pages/register/register?scene=${this.option.scene}`,
				})
			},
			//获取团队详情
			getTeam(id) {
				this.$api.getTeamBySuperId(id).then(res => {
					console.log('获取团队详情',res)
					this.team = res.data.data? res.data.data:{};
				})
			},
			//加入团队
			joinTeam(obj) {
				let that = this;
				uni.showModal({
					title: '加入团队',
					content: '是否加入此团队',
					success: function(res) {
						if (res.confirm) {
							let parmas = {};
							parmas.partnerId = that.option.scene;
							parmas.yid = that.option.scene;;
							that.goJoinTeam(parmas);
						}
					}
				});
			},
			goJoinTeam(obj) {
				let that = this;
				this.$api.joinTeamBy(obj).then(res => {
					uni.showToast({
						title: '申请成功',
						duration: 2000
					});
					setTimeout(() => {
						uni.switchTab({
							url: "/pages/team/team"
						})
					}, 500)
				}).catch((err) => {
					console.log(err)
					if (err.code == 401) {
						this.show = true;
					}
				})
			},
		}
	}
</script>
<style>
	page {
		box-sizing: border-box;
		background: #F8F8F8;
	}
</style>
<style lang="scss" scoped>
	.user {
		background: linear-gradient(to bottom, $dtg-color-primary 0%, $dtg-color-primary 35%, #f8f8f8 36%, #f8f8f8 100%);
		margin-bottom: 20rpx;
		padding: 60rpx 30rpx 0;

		.wrap {
			width: 100%;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 60rpx 30rpx 30rpx;
			min-height: 300rpx;
			position: relative;
			text-align: center;

			.img_wrap {
				width: 110rpx;
				height: 110rpx;
				border: 2rpx solid #FFFFFF;
				border-radius: 50%;
				overflow: hidden;
				position: absolute;
				top: -54rpx;
				left: calc(50% - 55rpx);

				.user_img {
					width: 106rpx;
					height: 106rpx;
				}
			}

			.name {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.level {
				background: #FC4073;
				color: #FFFFFF;
				font-weight: normal;
				font-size: 28rpx;
				border-radius: 10rpx;
				display: inline-block;
				padding: 4rpx 18rpx;
				line-height: 1;
				margin-left: 10rpx;
				font-family: unidin;
			}

			.intro {
				color: #999999;
			}

			.num {
				margin: 40rpx 0;
			}

			.No {
				color: #FC4073;
				font-size: 36rpx;
				margin: 0 10rpx;
			}
		}
	}

	.notice {
		padding: 20rpx 30rpx;
		background: white;
		margin: 0 30rpx 20rpx;
		border-radius: 20rpx;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.title {
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
		}

		.info {
			color: $dtg-color-primary;
			font-size: 40rpx;
			margin-right: 10rpx;
		}

		.edit {
			color: #999999;
			font-size: 40rpx;
		}

		.bottom {
			margin: 20rpx 0;
			font-size: 26rpx;
			width: 100%;
			color: #333333;
		}
	}

	.btn {
		margin: 20rpx auto;
	}

	.zz-tips {
		font-size: 24rpx;
		color: #585CF7;
		margin-top: 10px;
		text-align: right;
		padding: 0 30rpx;
	}

	.layer {
		width: 500rpx;
		height: 300rpx;
		padding-top: 60rpx;
		text-align: center;
	}

	.tishi {
		font-size: 36rpx;
		font-weight: bold;
	}

	.ts-content {
		margin-top: 20rpx;
	}

	.btn-flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 40rpx;
		border-top: 1px solid #eee;
	}

	.btn-item {
		flex: 1;
		height: 88rpx;
		line-height: 88rpx;
		color: rgb(223, 27, 27);
	}

	.btn-item-login {
		border-left: 1px solid #eee;
		color: #585CF7;
	}
</style>
